<template>
    <main>
        <!-- 待付款 -->
        <div  class="bigbox">
            <div class="rel_container">
                <div class="rel_container_list" v-for="(item,index) in listdata" :key="index">
                    <span><img :src="item.listicon" alt=""></span>
                    <br>
                    <span>{{item.listname}}</span>
                </div>
                <div class="rel_container_list list">
                    <span><img :src=" listiconselect[0].listicon" alt="" width="1.875rem" height="1.875rem"></span>
                    <br>
                    <span>{{listiconselect[0].listname}}</span>
                </div>
            </div>
        </div>
        <!-- 优惠卷 -->
        <div  class="bigbox" >
            <div class="rel_container">
                <div class="rel_container_list" v-for="(item,index) in listdata1" :key="index">
                    <h2 style="font-size:1.25rem;">{{item.listicon}}</h2>
                    <span style="display:inline-block;padding-top:1rem;">{{item.listname}}</span>
                </div>
                <div class="rel_container_list list">
                    <span><img :src=" listiconselect[1].listicon" alt="" width="1.875rem" height="1.875rem"></span>
                    <br>
                    <span  style="display:inline-block;padding-top:.7rem;">{{listiconselect[1].listname}}</span>
                </div>
            </div>
        </div>
        <!--  工具与服务-->
        <div class="Tools">
            <div class="ToolsTop">工具与服务</div>
            <div style="display:flex;flex-wrap:wrap;">
                <div class="ToolsList" v-for="(item,index) in ToolsList" :key="index">
                    <div style="padding-top:.3125rem;">
                        <span><img :src="item.listicon" alt=""></span>
                        
                        <span style="display:block;height:.3125rem;"></span>
                        <span>{{item.listiconselect}}</span>
                    </div>
                    
                </div>
            </div>
            
        </div>
    </main>
</template>
<script>
export default {
    data:()=>({
        listdata:[
            {
                listicon:'src/assets/images/list.png',
                listname:'待付款'
            },
            {
                listicon:'src/assets/images/list1.png',
                listname:'待收货'
            },
            {
                listicon:'src/assets/images/list2.png',
                listname:'退换/售后'
            }    
        ],
        listdata1:[
            {
                listicon:0,
                listname:'优惠卷'
            },
            {
                listicon:0,
                listname:'京豆'
            },
            {
                listicon:0,
                listname:'红包'
            }    
        ],
        listiconselect:[
            {
            listicon:'src/assets/images/list3.png',
            listname:'全部订单'
            },
            {
            listicon:'src/assets/images/list4.png',
            listname:'我的资产'
            }
        ],
        ToolsList:[
            {
                listicon:'src/assets/images/ToolsList.png.webp',
                listiconselect:'客户服务'
            },
            {
                listicon:'src/assets/images/ToolsList1.png.webp',
                listiconselect:'我的预约'
            },
            {
                listicon:'src/assets/images/ToolsList3.png.webp',
                listiconselect:'我的问答'
            },
            {
                listicon:'src/assets/images/ToolsList4.png.webp',
                listiconselect:'闲置换钱'
            },
            {
                listicon:'src/assets/images/ToolsList5.png.webp',
                listiconselect:'高价回收'
            }
        ]
    })
}
</script>
<style scoped lang="less">
@w:23.4375rem;
@h:5.5rem;
main{
   width: @w;
   margin-top: .0625rem;
   position: relative;
   z-index: 1;
    //优惠卷与待付款    
   .bigbox{
       width: @w;
       height: @h;
       margin-top: -0.625rem;
       margin-bottom: 1.625rem;
       display: flex;
       justify-content: center;
       background:#fff;
       border-radius: .625rem;
   }
    .rel_container{
        width: @w - 1.75rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .75rem;
        .rel_container_list{
            width: @w - 1.75rem / 4;
            height: 3.1875rem;
            
            position: relative;
            img{
                width: 1.875rem - .3125rem;
                height: 1.875rem - .3125rem;
            }
        }
        .list{
            img{
                width: 1.875rem;
            height: 1.875rem; 
            }
           
        }
        .list::before{
            position: absolute;
            z-index: 1;
            top: -0.75rem;
            left: 0rem;
            width: .625rem;
            height: 4.5rem;
            background: url(https://img11.360buyimg.com/jdphoto/s20x144_jfs/t14743/330/1610539369/321/10d659d3/5a53580eNa26a8177.png);
            background-size: .625rem;
            content: "";
        }
    }
    .rel_container:nth-of-type(2){
       font-size: 1rem;
   }

    //工具与服务
    .Tools{
        width: @w;
        background: #fff;
        border-radius: .625rem;
        margin-top: -.625rem;
        .ToolsList{
            width: @w/4;
            height: 4.625rem;
            font-size: .75rem;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
            width: 2.1875rem;
            height: 2.1875rem;
        }
        }
    }
    .ToolsTop{
        width: @w - .9375rem - .9375rem;
        padding: .625rem  .9375rem;
        color: #2e2d2d;
       position: relative;
       text-align: left;
       font-weight: 700;
       font-size: .875rem + .0625rem;
        
    } 
    .ToolsTop:after{
            background: #f2f2f2;
            position: absolute;
            left: 0rem;
            right: 0rem;
            height: .0625rem;
            bottom: 0rem;
            content: "";
            
    }
    
}
</style>